<template>
  <div style="width:100vw;" class="growup-box">
    <!-- <div class="growup-header">
       <mt-header fixed title="成长档案">
        <router-link to="" slot="left">
          <mt-button @click="backHome" icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>-->
    <div class="bscroll" ref="bscroll">
      <div class="bscroll-container">
        <div class="growup-banner-box">
          <div @click="goOwnRecord" class="growup-banner flex-row">
            <div class="growup-user-detail">
              <div class="growup-user">{{growupList.username}}</div>
              <div class="growup-partment">{{growupList.deptName}}</div>
              <div class="growup-post">{{growupList.rankName || '暂无'}}</div>
            </div>
            <div
              :style="`background-image:url(${growupList.photo || require('@/assets/homePicture/03.png')});`"
              style="overflow:hidden;"
              class="growup-user-picture"
            >
              <!-- <img :src="growupList.photo || require('@/assets/homePicture/03.png')" alt /> -->
            </div>
          </div>
          <div class="group-detail-box flex-row">
            <div @click="getRank" class="flex-size border-right shadow">
              <p
                style="font-size:23px;color:#4787E4;margin-bottom:5px;"
                class="iconfont iconjixiaokaoping"
              ></p>
              <p style="min-height:16px;">绩效评分：{{growupList.perintroduce || '暂无'}}</p>
            </div>
            <div @click="getTitleInfo" class="flex-size">
              <p
                style="font-size:23px;color:#E58E4E;margin-bottom:5px;"
                class="iconfont iconlingdaitie2"
              ></p>
              <p style="min-height:16px;">{{growupList.jobTitle || '职称信息'}}</p>
            </div>
          </div>
        </div>
        <div class="training-courses">
          <div class="training-courses-tip flex-row">
            <div>培训培养</div>
          </div>
          <div class="training-courses-time flex-row">
            <div class="training-timeline flex-column">
              <span>听课时长：</span>
              <span class="training-time">{{timeLine.classTime}} min</span>
            </div>
            <div style="background-color:#DFF1F0;" class="training-timeline flex-column">
              <span>上课时长：</span>
              <span class="training-time">{{timeLine.attendanceTime}} min</span>
            </div>
          </div>
        </div>
        <div class="training-cell">
          <mt-cell to="/patent" title="专利及知识产权" is-link></mt-cell>
          <mt-cell to="/projectExperice" title="项目经验" is-link></mt-cell>
          <mt-cell @click.native="goodClass" title="六西格玛详情" is-link></mt-cell>
          <mt-cell @click.native="goApplication" title="申请晋级" is-link></mt-cell>
        </div>
      </div>
    </div>
    <div class="home-footer">
      <mt-tabbar fixed v-model="selectedTab">
        <mt-tab-item id="Home">
          <!-- <img slot="icon" src="@/assets/homePicture/home1.png" /> -->
          <div slot="icon" class="iconfont home-tab-icon icontianchongxing-"></div>
          <!-- <img slot="icon" src="@/assets/homePicture/home1.png"  v-if="this.selected == 'Home'"/> -->
          首页
        </mt-tab-item>
        <mt-tab-item id="StudyCenter">
          <!-- <img slot="icon" src="@/assets/homePicture/home2.png" /> -->
          <div slot="icon" class="iconfont home-tab-icon iconwenti-shuben"></div>学习
        </mt-tab-item>
        <mt-tab-item id="Growup">
          <!-- <img slot="icon" src="@/assets/homePicture/home3.png" /> -->
          <div slot="icon" class="iconfont home-tab-icon iconxinfeng2"></div>成长
        </mt-tab-item>
        <mt-tab-item id="Things">
          <!-- <img slot="icon" src="@/assets/homePicture/home4.png" /> -->
          <div slot="icon" class="iconfont home-tab-icon iconrili"></div>办事
        </mt-tab-item>
        <mt-tab-item id="TalentIntroduce">
          <div slot="icon" class="iconfont home-tab-icon iconweibiaoti--"></div>优才
        </mt-tab-item>
      </mt-tabbar>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import { setText } from "../../untils/ddnavigate";
import { Indicator, Toast } from "mint-ui";
export default {
  name: "growup",
  data() {
    return {
      selectedTab: "Growup",
      selected: "",
      growupList: {},
      timeLine: {}
    };
  },
  watch: {
    selectedTab(before, after) {
      this.$router.push({ path: before });
    }
  },
  methods: {
    goodClass() {
     this.$router.push({
       path:'/sixlxsb'
     })
    },
    goApplication() {
      let that = this;
      // 获取职级信息
      that.$get("getRank").then(res => {
        if (res.success) {
          that.applicationList = res.data;
          that.$router.push({ path: "/application" });
        }
      });
    },
    goOwnRecord() {
      this.$router.push({ path: "/ownRecord" });
    },
    getRank() {
      let { growupList } = this;
      if (!growupList.perintroduce) {
        Toast({
          className: "z-index",
          message: "你当前暂无绩效",
          duration: 2000
        });
        return;
      }
      this.$router.push({ path: "/MeritsDetail" });
    },
    getTitleInfo() {
      let { queue, sort } = this.growupList;
      this.$router.push({ path: "/titleDetail", query: { queue, sort } });
    }
  },
  mounted() {
    // 初始化标题文字
    let that = this;
    setText("成长档案");
    that.$nextTick(() => {
      let bscrollDom = that.$refs.bscroll;
      that.aBScroll = new BScroll(bscrollDom, {
        click: true
      });
    });
    that.$get("getFileDetails").then(res => {
      if (res.success) {
        that.growupList = res.data;
        // 缓存个人档案
        let getFileDetails = JSON.stringify(res.data);
        localStorage.setItem("getFileDetails", getFileDetails);
      }
    });
    that.$get("getTimes").then(res => {
      if (res.success) {
        that.timeLine = res.data;
      }
    });
  }
};
</script>
<style lang="less" scoped>
@import url("~@/pagecss/growup.less");
.mint-cell-wrapper {
  padding: 0 10px;
}
.home-tab-icon {
  padding-top: 2px !important;
}
.flex-size {
  width: 50%;
}
// .bscroll-container {
//   padding-bottom: 55px;
// }
</style>